<template>
	<div id="distance">
		<!--修改添加-->
		<Modal
	        v-model="modal"
	        :title="modalTitle"
	        class="modalStyle"
	        @on-ok="modalOk">
	        <div class="content">
	        	<table>
	        		<tr>
	        			<th colspan="3">机场A</th>
	        		</tr>
	        		<tr>
	        			<td>机场三字码</td>
	        			<td><Input class="tableInput"/></td>
	        		</tr>
	        		<tr>
	        			<td>机场中文名</td>
	        			<td><Input class="tableInput"/></td>
	        		</tr>
	        		<tr>
	        			<td>城市名</td>
	        			<td><Input class="tableInput"/></td>
	        		</tr>
	        	</table>
	        	<table>
	        		<tr>
	        			<th colspan="3">机场B</th>
	        		</tr>
	        		<tr>
	        			<td>机场三字码</td>
	        			<td><Input class="tableInput"/></td>
	        		</tr>
	        		<tr>
	        			<td>机场中文名</td>
	        			<td><Input class="tableInput"/></td>
	        		</tr>
	        		<tr>
	        			<td>城市名</td>
	        			<td><Input class="tableInput"/></td>
	        		</tr>
	        	</table>
	        	<div class="distanceWarp">
	        		<div class="title">距离</div>
	        		<div class="dis">
	        			<Input class="tableInput"/>
	        		</div>
	        	</div>
	        </div>
	    </Modal>
		<div class="queryPanel">
			<ul>
				<li>
					<span>机场A：</span>
					<Input/>
				</li>
				<li>
					<span>机场B：</span>
					<Input/>
				</li>
				<li>
					<Button @click="search" class="search">查询</Button>
				</li>
			</ul>
			<div>
				<Button @click="add" class="add">添加</Button>
			</div>
		</div>
		<div class="tableWarp" v-if="show">
			<div class="table1">				
				<table>
					<tr>
						<th colspan="3">机场A</th>
						<th colspan="3">机场B</th>						
						<th rowspan="2">距离（KM）</th>
						<th rowspan="2">操作</th>
					</tr>
					<tr>						
						<th>机场三字码</th>
						<th>机场中文名</th>
						<th>城市名</th>
						<th>机场三字码</th>
						<th>机场中文名</th>
						<th>城市名</th>						
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td class="handle">
							<span class="iconfont" @click="edit">&#xe601;</span>
							<span class="iconfont" @click="dele">&#xe62e;</span>
						</td>						
					</tr>					
				</table>
			</div>	
		</div>	
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import "./style.scss";
</style>